<template>
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @click="insert">
  <van-swipe-item >
    <img src="@/assets/images/1.jpg">
  </van-swipe-item>
   <van-swipe-item>
     <img src="@/assets/images/2.jpg">
  </van-swipe-item>
   <van-swipe-item>
    <img src="@/assets/images/3.jpg">
  </van-swipe-item>
   <van-swipe-item>
     <img src="@/assets/images/4.jpg">
  </van-swipe-item>
</van-swipe>
  <div class="zhong">
      <div class="zhong1" @click="tiao1"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psz40ijex6v7mh9ac3qkygtjtbzxufzosu8e63acdd-6acc-43a1-9db9-00b9a73ae75d"></div>
      <div class="zhong1" @click="tiao2"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbtjtc347dxto5afg9va19nhfsmo4mi8o3b570332-f7e6-4539-b24b-4a3ded89b1fc"></div>
      <div class="zhong1" @click="tiao3"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps0q2wdj9i7xp8w7kov0917goau7u4fr8y5048a86e-404e-4141-a5ee-41b017efb18a"></div>
      <div class="zhong1" @click="tiao4"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnr8lrxw2ndc02ca25zo4ghveqi6ynrx5134a6bd9-291f-412f-96d8-be1321f900a8"></div>
      <div class="zhong1" @click="tiao5"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psj0n31wsv5wcgir0zn1126t0yh9rs9mfxt1f9f22bf-6620-4ce4-be87-10b78a0f8122"></div>
  </div>
  <div class="wenzi">
    <p @click="tiao1">关注福利</p>
    <p @click="tiao2">新手策略</p>
    <p @click="tiao3">欧皇榜单</p>
    <p @click="tiao4">置换好物</p>
    <p @click="tiao5">提货必看</p>
  </div>
<div class="shang"  @click="pai"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psia1wppuhpvws0ck3zxbsc5yd4v2u23ofdf1755b-c001-441b-87b4-c73c61b6d70a"></div>

  <div class="wei" style="height:180px;border:1px  gray">
  <div class="xinren"><span style="margin-left:35px;">新人福利</span><span style="margin-left:150px;">MORE</span></div>
      <div class="xia" style="margin-left:35px">
            <router-link :to="{name:'fuli'}"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psltkxefj9cakei27csetisbh4z123vsq4b9636071-51cd-42db-8c07-61691df48a02" alt=""></router-link>
         </div>
         <div class="xia">
           <router-link :to="{name:'fuli'}"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjhz5o3t7x5sbfdiu71iim9mwavfvgtmecd8ed4ca-1eda-4384-88ec-58549e92d928" alt=""></router-link>
         </div>
         <div class="xia">
           <router-link :to="{name:'fuli'}"><img src="https://lanhu.oss-cn-beijing.aliyuncs.com/pstttduuria88g19w549ypc52bfwgdyumvyd5d76d43-4672-417d-89a4-6dfa9d7d64a3" alt=""></router-link>
         </div>
  </div>

</template>

<script>
export default {
  data(){
    return{
        
    }
  },
  methods:{
    pai(){
      this.$router.push({name:'pai'})
    },
    insert(){
    this.$router.push({name:'banners'})
    },
    tiao1(){
        this.$router.push({
            name:'guanzhufuli'
        })
    },
    tiao2(){
        this.$router.push({
            name:'xinrenfuli'
        })
    },
    tiao3(){
        this.$router.push({
            name:'ranking'
        })
    },
    tiao4(){
        this.$router.push({
            name:'sp'
        })
    },
    tiao5(){
        this.$router.push({
            name:'th'
        })
    }
  }
}
</script>

<style scoped>
  .my-swipe img{
    width: 100%;
    height: 170px;
   }
   .zhong{
    height: 50px;
    background-color:white;
    width: 100%;
    display: flex;
    justify-content: space-around;
   }
   .zhong1{
    margin-top: 15px;
   
    width: 40px;
    height: 40px;
   }
   .wenzi{
    background-color:white;
    display: flex;
     justify-content: space-around;
     margin-bottom:10px;
   }
   .wenzi p{
    margin-top: 10px;
    font-size: 16px;
   }
   .fuli{
    margin-top: 10px;
    margin-left: 15px;
    width: 90%;
   }
   .xinren span{
    font-size:23px;
   }
   .shang{
    margin-top: 10px;
    width:95%;
    height: 100px;
    background-color: darkgreen;
    text-align: center;
    line-height: 40px;
    margin:0 auto;
    margin-bottom:12px;
   }
   .shang img{
    width: 100%;
    height: 100%;
   }
   .xia{
    width: 90px;
    height: 100px;
    background-color: darkgrey;
    float: left;
    margin-left:20px
   }
   .xia img{
    width: 100%;
    height: 100%;
   }
   .fa{
    text-align: center;
    font-size: 35px;
   }
</style>